import Vue,{PropOptions,VNode} from 'vue';
import {QIcon,QSpinner} from 'quasar';
import {VueConstructor} from 'vue/types/vue';
import {LOADING_TEXT} from '../../js/pc/message';
/**
 * 定义非响应数据
 * @property {boolean} isKeydown 是否按下了键盘
 */
export interface ButtonVue extends Vue{
	isKeydown:boolean
}
/**
 * 按钮类型
 */
export type ButtonType='text'|'default'|'primary'|'info'|'success'|'warning'|'error';
/**
 * 按钮
 * @author 唐国雄
 * @date 2021/6/16
 * 属性----------------------
 * :type		按钮类型, ButtonType
 * :outline		线条模式, boolean
 * :rounded		圆角模式, boolean
 * :round		圆形模式, boolean
 * :icon		图标, string
 * :disable		禁用, boolean
 * :loading		加载状态, boolean | string
 * 事件----------------------
 * @click
 * 插槽----------------------
 * #default		默认内容
 * #loading		加载中内容
 */
export default (Vue as VueConstructor<ButtonVue>).extend({
	name:'Button',
	props:{
		//按钮类型
		type:{
			type:String,
			default:'default',
			validator(v){
				return [
					'text',
					'default',
					'primary',
					'info',
					'success',
					'warning',
					'error',
				].indexOf(v)!==-1;
			}
		} as PropOptions<ButtonType>,
		//线条模式
		outline:Boolean,
		//圆角模式
		rounded:Boolean,
		//圆形模式
		round:Boolean,
		//图标
		icon:String,
		//禁用
		disable:Boolean,
		//加载状态
		loading:[Boolean,String],
	},
	computed:{
		classes():string{
			return 'lexmis-Button'+
				` lexmis--${this.type}`+
				(this.outline?' lexmis--outline':' lexmis--fill')+
				(this.forbid?' lexmis--forbid':' lexmis--hoverable')+
				(this.rounded?' lexmis--rounded':'')+
				(this.round?' lexmis--round':'');
		},
		//禁止点击
		forbid():boolean{
			return this.disable||this.loading!==false;
		},
	},
	methods:{
		$_lexmis_onClick(Keyboard:boolean,blur:boolean,e:Event){
			if(!this.forbid){
				this.$emit('click',Keyboard,e);
				if(blur){
					(this.$el as HTMLElement).blur();
				}
			}
		},
	},
	render(h):VNode{
		const {loading:loadingSlot,default:slot}=this.$scopedSlots;
		return h('div',{
			staticClass:this.classes,
			attrs:{
				tabindex:this.forbid?-1:0,
			},
			on:{
				click:(e:MouseEvent) => {
					this.$_lexmis_onClick(false,true,e);
				},
			}
		},this.loading
			?(loadingSlot
				?loadingSlot(undefined)
				:[
					typeof this.loading==='string'
						?this.loading
						:LOADING_TEXT,
					h(QSpinner,{
						staticClass:'lexmis_spinner',
					}),
				])
			:[
				this.icon
					?h(QIcon,{
						props:{
							name:this.icon
						}
					})
					:null,
				slot
					?h('div',{
						staticClass:'lexmis_content',
					},slot(undefined))
					:null
			]);
	},
});
